<template>
  <div class="app-container">
    <div class="top">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
      >
        <el-form-item prop="erpOrderNo" class='el-width-110'>
          <el-input
            v-model="queryParams.erpOrderNo"
            placeholder="请输入工单编号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item prop="itemName" class='el-width-110'>
          <el-input
            v-model="queryParams.itemName"
            placeholder="请输入产品名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <organizationCascader
            :clearData="clearData"
            :arrData="queryParams"
            :widthData="widthData"
            :isAllList="true"
            @change="queryParamsChange"
          ></organizationCascader>
        </el-form-item>

        <el-form-item prop="groupId" class='el-width-110'>
          <el-select
            placeholder="请选择班组"
            clearable
            v-model="queryParams.groupId"
            size="small"
          >
            <el-option
              v-for="item in groupList"
              :key="item.id"
              :label="item.erpWorkGroupDesc"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="Table"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      height="calc(100% - 55px - 50px)"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="工单编号" prop='erpOrderNo'>
        <template slot-scope="{ row }">
          <span class='status-look' @click.stop="handleOrder(row)">{{row.erpOrderNo}}</span>
        </template>
      </el-table-column>
      <el-table-column label="生产产品" prop='itemName'></el-table-column>
      <el-table-column label="计划产量" prop='planQuantity'></el-table-column>
      <el-table-column label="单位" prop='itemUnit' width="50"></el-table-column>
      <el-table-column label="所属工厂" prop='factoryDeptName'></el-table-column>
      <el-table-column label="所属车间" prop='workshopName'></el-table-column>
      <el-table-column label="所属产线" prop='lineName'></el-table-column>
      <el-table-column label="所属班组" prop='groupName'></el-table-column>
      <el-table-column label="实际开始时间" prop='actualStarttime' min-width="140"></el-table-column>
      <el-table-column label="实际完成时间" prop='actualEndtime' min-width="140"></el-table-column>
      <el-table-column label="工单状态">
        <template slot-scope="{ row }">
          <span class="status-1" v-if='row.orderStatus == "TO_CONFIRM"'>{{statusEnum(row.orderStatus)}}</span>
          <span class="status-2" v-else-if='row.orderStatus == "TO_CLOSE"'>{{statusEnum(row.orderStatus)}}</span>
          <span v-else>{{statusEnum(row.orderStatus)}}</span>
        </template>
      </el-table-column>

      <el-table-column label="工单来源" width="80">
        <template slot-scope="{ row }">
          <span>{{soureEnum(row.orderSource)}}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      :total="pager.total"
      :page.sync="pager.pageNum"
      :limit.sync="pager.pageSize"
      @pagination="getList"
    />

    <orderDetail
      :visible.sync="orderData.visible"
      :row="orderData.row"
      :mode="orderData.mode"
      />
  </div>
</template>
<script>
  import {listErpGroup } from "@/api/team/group";
  import { orderList } from "@/api/workOrder/confirmClose";
  import organizationCascader from "@/views/components/organizationCascader";
  import { mapState,mapActions } from "vuex";
  import orderDetail from "../components/orderDetail";
export default {
  components: {organizationCascader,orderDetail},
  name:"History",
  dicts: ["cmomOrderSource", "cmomOrderStatus"],
  data() {
    return {
      queryParams: {
        erpOrderNo:"",
        itemName:"",
        factoryDeptCode:null,
        workshopCode:null,
        workshopId:null,
        lineId:null,
        groupId:null,
        orderStatus:"CLOSED"
      },
      list: [],
      loading: false,
      clearData:{
        factory:true,
        workshop:true,
        line:true
      },
      orderData:{
        visible:false,
        mode:"history",
        row:null
      },

      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      widthData:{
        factory:"130px",
        workshop:"130px",
        line:"130px"
      }
    };
  },

  created() {
    const result = this.getOwnFirstLine()
    this.queryParams.factoryDeptCode = result[0]?.factoryDeptCode;
    this.queryParams.workshopCode = result[1]?.workshopCode;
    this.queryParams.workshopId = result[1]?.workshopId;
    this.queryParams.lineId = result[2]?.lineId;
    this.getGroupList();
    this.getList();
  },

  computed:{
    ...mapState({
      groupList: (state) => state.common.groupList
    })
  },

  methods: {
    ...mapActions(["getGroupList"]),
    getList() {
      this.loading = true;
      const { pageNum, pageSize } = this.pager;
      const {
        erpOrderNo,
        itemName,
        factoryDeptCode,
        workshopId,
        lineId,
        groupId,
        orderStatus
      } = this.queryParams
      const param = {
        query:{
          erpOrderNo,
          itemName,
          factoryDeptCode,
          workshopId,
          lineId,
          groupId,
          orderStatus
        },
        pageNum,
        pageSize,
      };
      orderList(param)
      .then((res) => {
        this.list = res?.rows || {};
        this.pager.total = res?.total || 0;
        this.loading = false;
      })
      .catch(() => {
        this.list = [];
        this.pager.total = 0;
        this.loading = false;
      });
    },

    handleOrder(row){
      this.orderData.row = row?.id ? row : {};
      this.orderData.visible = true;
    },

    queryParamsChange({ factoryDeptCode, workshopId,lineId }) {
      this.queryParams.factoryDeptCode = factoryDeptCode;
      this.queryParams.workshopId = workshopId;
      this.queryParams.lineId = lineId;
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams = {
        erpOrderNo:"",
        itemName:"",
        factoryDeptCode:null,
        workshopCode:null,
        workshopId:null,
        lineId:null,
        groupId:null,
        orderStatus:"CLOSED"
      };
      this.handleQuery();
    },

    statusEnum(val){
      const statusItem = this.dict.cmomOrderStatus?.find(ele => ele.codevalue == val);
      return statusItem && statusItem["codename"]
    },

    soureEnum(val){
      const sourceItem = this.dict.cmomOrderSource?.find(ele => ele.codevalue == val);
      return sourceItem && sourceItem["codename"]
    }
  },
};
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .el-form{
    flex:1;
    text-align: right;
    ::v-deep .el-form-item__content{
      line-height: 0;
    }
  }
}
.pagination-container {
  margin: 0;
}

.status-1{
  background: #ffff80;
  font-weight: 600;
}

.status-2{
  background: #88c446;
  font-weight: 600;
}
.status-4{
  color: #666666;
  font-weight: 600;
}
.status-look{
  color:#027DB4
}
</style>
